<script setup lang="ts">
import type { FormRules } from 'wot-design-uni/components/wd-form/types';
import { ref } from 'vue';
import { PatientApi } from '@/api/patient';
import AuthBar from '@/components/authBar/index.vue';
import { SEX } from '@/enums';
import { LOGIN_TYPE } from '@/enums/login.enums';
import { useLoginHelper } from '@/hooks/useLoginHelper';
import { buildAssetSource } from '@/utils';
import { validateIdCard } from '@/utils/idCard.utils';

const loading = ref(false);

const formRef = ref();

const formRules = ref<FormRules>({
  patientName: [
    { required: true, message: '请输入姓名' }
  ],
  idCard: [
    { required: true, message: '请输入身份证号' },
    { required: true, message: '请输入正确身份证号', validator: validateIdCard }
  ]
});

const model = ref({
  patientName: '',
  idCard: '',
  sex: SEX.MALE
});

const { onToLoginConfirm } = useLoginHelper();

async function handleRegister() {
  // 校验表单信息
  await formRef.value.validate().then(res => {
    if (!res.valid) {
      uni.showToast({
        title: '请填写完整信息',
        icon: 'none'
      });
      return Promise.reject(new Error('请输入正确信息'));
    }
  });
  loading.value = true;
  uni.showLoading({
    title: '加载中...',
    mask: true
  });
  PatientApi.onMedicalCardRegister({
    type: LOGIN_TYPE.DIAGNOSIS_CARD,
    patientName: model.value.patientName,
    numberNo: model.value.idCard,
    idCard: model.value.idCard,
    sex: model.value.sex
  }).then(res => {
    // TODO 注册成功 调用发卡

    return PatientApi.onHealthCardLogin({
      type: LOGIN_TYPE.DIAGNOSIS_CARD,
      numberNo: res.treatmentCard
    }).then(patient => {
      return onToLoginConfirm(patient);
    });
  }).catch(err => {
    uni.showModal({
      title: '提示',
      content: err.msg || '注册失败',
      showCancel: false
    });
  }).finally(() => {
    uni.hideLoading();
    loading.value = false;
  });
}
</script>

<template>
  <view class="card-register flex-col">
    <AuthBar back-home />
    <view class="flex-1 overflow-auto">
      <view class="card-register__cover m-auto mt-45">
        <image :src="buildAssetSource('login-jzk.png')" class="h-140 w-140" />
      </view>
      <view class="card-register__title mt-34">
        就诊卡注册
      </view>
      <view class="card-register__desc mt-34">
        请输入您的个人信息，注册就诊卡发卡
      </view>

      <view class="mt-48 px-162">
        <view class="card-register__content">
          <wd-form ref="formRef" :model="model" :rules="formRules">
            <view class="form-wrapper">
              <view class="form-item">
                <view class="form-item__label">
                  姓名
                </view>
                <view class="form-item__input">
                  <wd-input v-model="model.patientName" placeholder="请输入姓名" prop="patientName" />
                </view>
              </view>
              <view class="form-item">
                <view class="form-item__label">
                  身份证号
                </view>
                <view class="form-item__input">
                  <wd-input v-model="model.idCard" placeholder="请输入身份证号" prop="idCard" />
                </view>
              </view>
              <view class="form-item">
                <view class="form-item__label">
                  性别
                </view>
                <view class="form-item__input">
                  <wd-radio-group v-model="model.sex" inline prop="sex" shape="button" size="large">
                    <wd-radio :value="SEX.MALE">
                      男
                    </wd-radio>
                    <wd-radio :value="SEX.FEMALE">
                      女
                    </wd-radio>
                  </wd-radio-group>
                </view>
              </view>
            </view>
          </wd-form>

          <view class="mt-46 flex-center">
            <view class="action-btn w-708">
              <wd-button block :loading="loading" @click="handleRegister">
                注册
              </wd-button>
            </view>
          </view>
        </view>
      </view>

      <view class="mt-50 px-50">
        <view class="login-tips">
          <view class="tips-title">
            <wd-icon name="help-circle" size="32px" /> 使用提示
          </view>
          <view class="tips-content">
            <view>
              1.输入您的个人信息可注册就诊卡并自动发卡
            </view>
            <view class="mt-10">
              2.可将您的身份证放置识别区，进行识别并自动发卡
            </view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<route type="page" lang="json5">
{
  layout: 'default',
  style: {
    navigationBarTitleText: '用户登录',
    navigationStyle: 'custom'
  }
}
</route>

<style lang="scss" scoped>
.card-register {
  background-color: var(--bg-color);
  height: 100%;

  .card-register__cover {
    @apply flex-center;
    background: #e5efff;
    width: 202px;
    height: 202px;
    border-radius: 50%;
  }

  .card-register__title {
    color: var(--text-color);
    font-weight: bold;

    font-size: 60px;
    text-align: center;
  }

  .card-register__desc {
    font-size: 28px;
    color: var(--secondary-text-color);
    text-align: center;
  }

  .card-register__content {
    background: #cbdefc;
    box-sizing: border-box;
    border: 2px solid #e6effd;
    border-radius: 20px;
    backdrop-filter: blur(10px);
    padding: 59px 67px;

    .form-wrapper {
      .form-item {
        margin-bottom: 48px;
        .form-item__label {
          font-size: 36px;
          font-weight: bold;
          color: var(--text-color);

          margin-bottom: 20px;
        }
        .form-item__input {
          --wot-input-inner-height: 98px;
          --wot-input-fs: 30px;
          --wot-input-bg: #eff5ff;
          --wot-input-color: var(--text-color);
          --wot-input-not-empty-border-color: transparent;
          --wot-input-border-color: transparent;
          --wot-input-placeholder-color: var(--secondary-text-color);
          --wot-form-item-error-message-font-size: 32px;

          --wot-radio-bg: #fff;
          --wot-radio-size: 32px;
          --wot-radio-large-label-fs: 32px;
          --wot-radio-checked-color: var(--primary);
          --wot-radio-button-height: 70px;

          :deep(.wd-input) {
            border-radius: 16px;
            padding: 6px 32px;
            border: 1px solid #fff;
          }

          :deep(.wd-radio-group) {
            background: transparent;

            .wd-radio {
              --wot-radio-label-color: var(--text-color);
              --wot-radio-button-min-width: 120px;

              .wd-radio__label {
                line-height: 55px;
              }
            }
          }
        }
      }
    }
  }

  .action-btn {
    --wot-button-medium-height: 124px;
    --wot-button-medium-fs: 42px;
    --wot-button-medium-loading: 32px;

    :deep(.wd-button) {
      font-weight: bold;
    }
  }

  .login-tips {
    background: rgba(247, 250, 254, 0.5);
    border-radius: 10px;
    border: 2px solid rgba(255, 255, 255, 0.5);
    padding: 38px 0 38px 31px;
    margin-bottom: 45px;

    .tips-title {
      font-size: 32px;
      font-weight: bold;

      color: var(--text-color);
    }

    .tips-content {
      font-size: 24px;
      color: var(--secondary-text-color);
      margin-top: 25px;
    }
  }
}
</style>
